* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
  color: #fff;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

input {
  display: none;
}

.list {
  text-align: center;
}
.list-item {
  margin: 0.5em;
  font-size: 1.25em;
}
.list-item a {
  text-decoration: none;
}

.link {
  text-transform: uppercase;
  color: #2F8621;
}

.game-field-text {
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  font-weight: 900;
  font-size: 1.5rem;
}
.game-field-color {
  color: #9E2730;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.cell, .game-field {
  border: 1.3333333333vmin solid #000;
}

.game-field {
  display: flex;
  width: 82.6666666667vmin;
  flex-wrap: wrap;
}

.cell {
  max-height: 26.6666666667vmin;
  max-width: 26.6666666667vmin;
  overflow: hidden;
}
.cell-bg {
  display: block;
  position: relative;
  height: 24vmin;
  width: 24vmin;
  background: repeating-linear-gradient(#9E2730 0, #9E2730 26.6666666667vmin, #2F8621 26.6666666667vmin, #2F8621 53.3333333333vmin);
  background-size: 26.6666666667vmin 240vmin;
  background-position-x: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb1:not(:checked) ~ .scope {
  --from-1-to-1-inverted: 1;
}

#cb1:checked ~ .scope {
  --from-1-to-1-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb1:not(:checked) ~ .scope {
  --from-1-to-9-inverted: 1;
}

#cb1:checked ~ .scope {
  --from-1-to-9-inverted: 0;
}

#cb1:not(:checked) ~ .scope {
  --from-1-to-4-inverted: 1;
}

#cb1:checked ~ .scope {
  --from-1-to-4-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb2:not(:checked) ~ .scope {
  --from-2-to-2-inverted: 1;
}

#cb2:checked ~ .scope {
  --from-2-to-2-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb2:not(:checked) ~ .scope {
  --from-2-to-7-inverted: 1;
}

#cb2:checked ~ .scope {
  --from-2-to-7-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb3:not(:checked) ~ .scope {
  --from-3-to-3-inverted: 1;
}

#cb3:checked ~ .scope {
  --from-3-to-3-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb3:not(:checked) ~ .scope {
  --from-3-to-6-inverted: 1;
}

#cb3:checked ~ .scope {
  --from-3-to-6-inverted: 0;
}

#cb3:not(:checked) ~ .scope {
  --from-3-to-4-inverted: 1;
}

#cb3:checked ~ .scope {
  --from-3-to-4-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb4:not(:checked) ~ .scope {
  --from-4-to-4-inverted: 1;
}

#cb4:checked ~ .scope {
  --from-4-to-4-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb4:not(:checked) ~ .scope {
  --from-4-to-3-inverted: 1;
}

#cb4:checked ~ .scope {
  --from-4-to-3-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb5:not(:checked) ~ .scope {
  --from-5-to-5-inverted: 1;
}

#cb5:checked ~ .scope {
  --from-5-to-5-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb5:not(:checked) ~ .scope {
  --from-5-to-3-inverted: 1;
}

#cb5:checked ~ .scope {
  --from-5-to-3-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb6:not(:checked) ~ .scope {
  --from-6-to-6-inverted: 1;
}

#cb6:checked ~ .scope {
  --from-6-to-6-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb6:not(:checked) ~ .scope {
  --from-6-to-7-inverted: 1;
}

#cb6:checked ~ .scope {
  --from-6-to-7-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb7:not(:checked) ~ .scope {
  --from-7-to-7-inverted: 1;
}

#cb7:checked ~ .scope {
  --from-7-to-7-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb7:not(:checked) ~ .scope {
  --from-7-to-5-inverted: 1;
}

#cb7:checked ~ .scope {
  --from-7-to-5-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb8:not(:checked) ~ .scope {
  --from-8-to-8-inverted: 1;
}

#cb8:checked ~ .scope {
  --from-8-to-8-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb8:not(:checked) ~ .scope {
  --from-8-to-6-inverted: 1;
}

#cb8:checked ~ .scope {
  --from-8-to-6-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb9:not(:checked) ~ .scope {
  --from-9-to-9-inverted: 1;
}

#cb9:checked ~ .scope {
  --from-9-to-9-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb9:not(:checked) ~ .scope {
  --from-9-to-3-inverted: 1;
}

#cb9:checked ~ .scope {
  --from-9-to-3-inverted: 0;
}

/*
  Each cell may invert other cells
*/
.scope {
  --inversion-1-1: var(--from-1-to-1-inverted);
  --1-inverted: var(--inversion-1-1);
}

#s1 {
  background-position-y: calc(var(--inversion-1-1) * 26.6666666667vmin * 2);
}

.scope {
  --inversion-2-1: var(--from-2-to-2-inverted);
  --2-inverted: var(--inversion-2-1);
}

#s2 {
  background-position-y: calc(var(--inversion-2-1) * 26.6666666667vmin * 2);
}

.scope {
  --inversion-3-1: var(--from-3-to-3-inverted);
  --inversion-3-2: calc(
    (var(--inversion-3-1) - var(--from-4-to-3-inverted)) * (var(--inversion-3-1) - var(--from-4-to-3-inverted))
  );
  --inversion-3-3: calc(
    (var(--inversion-3-2) - var(--from-5-to-3-inverted)) * (var(--inversion-3-2) - var(--from-5-to-3-inverted))
  );
  --inversion-3-4: calc(
    (var(--inversion-3-3) - var(--from-9-to-3-inverted)) * (var(--inversion-3-3) - var(--from-9-to-3-inverted))
  );
  --3-inverted: var(--inversion-3-4);
}

#s3 {
  background-position-y: calc(var(--inversion-3-4) * 26.6666666667vmin * 2);
}

.scope {
  --inversion-4-1: var(--from-4-to-4-inverted);
  --inversion-4-2: calc(
    (var(--inversion-4-1) - var(--from-1-to-4-inverted)) * (var(--inversion-4-1) - var(--from-1-to-4-inverted))
  );
  --inversion-4-3: calc(
    (var(--inversion-4-2) - var(--from-3-to-4-inverted)) * (var(--inversion-4-2) - var(--from-3-to-4-inverted))
  );
  --4-inverted: var(--inversion-4-3);
}

#s4 {
  background-position-y: calc(var(--inversion-4-3) * 26.6666666667vmin * 2);
}

.scope {
  --inversion-5-1: var(--from-5-to-5-inverted);
  --inversion-5-2: calc(
    (var(--inversion-5-1) - var(--from-7-to-5-inverted)) * (var(--inversion-5-1) - var(--from-7-to-5-inverted))
  );
  --5-inverted: var(--inversion-5-2);
}

#s5 {
  background-position-y: calc(var(--inversion-5-2) * 26.6666666667vmin * 2);
}

.scope {
  --inversion-6-1: var(--from-6-to-6-inverted);
  --inversion-6-2: calc(
    (var(--inversion-6-1) - var(--from-3-to-6-inverted)) * (var(--inversion-6-1) - var(--from-3-to-6-inverted))
  );
  --inversion-6-3: calc(
    (var(--inversion-6-2) - var(--from-8-to-6-inverted)) * (var(--inversion-6-2) - var(--from-8-to-6-inverted))
  );
  --6-inverted: var(--inversion-6-3);
}

#s6 {
  background-position-y: calc(var(--inversion-6-3) * 26.6666666667vmin * 2);
}

.scope {
  --inversion-7-1: var(--from-7-to-7-inverted);
  --inversion-7-2: calc(
    (var(--inversion-7-1) - var(--from-2-to-7-inverted)) * (var(--inversion-7-1) - var(--from-2-to-7-inverted))
  );
  --inversion-7-3: calc(
    (var(--inversion-7-2) - var(--from-6-to-7-inverted)) * (var(--inversion-7-2) - var(--from-6-to-7-inverted))
  );
  --7-inverted: var(--inversion-7-3);
}

#s7 {
  background-position-y: calc(var(--inversion-7-3) * 26.6666666667vmin * 2);
}

.scope {
  --inversion-8-1: var(--from-8-to-8-inverted);
  --8-inverted: var(--inversion-8-1);
}

#s8 {
  background-position-y: calc(var(--inversion-8-1) * 26.6666666667vmin * 2);
}

.scope {
  --inversion-9-1: var(--from-9-to-9-inverted);
  --inversion-9-2: calc(
    (var(--inversion-9-1) - var(--from-1-to-9-inverted)) * (var(--inversion-9-1) - var(--from-1-to-9-inverted))
  );
  --9-inverted: var(--inversion-9-2);
}

#s9 {
  background-position-y: calc(var(--inversion-9-2) * 26.6666666667vmin * 2);
}

@keyframes colorize {
  to {
    background-position: 200% center;
  }
}
@keyframes move {
  0% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(-50%, -25%);
  }
  50% {
    transform: translate(-50%, -50%);
  }
  75% {
    transform: translate(-50%, -75%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
.win {
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  text-transform: uppercase;
  font-weight: 900;
  user-select: none;
  pointer-events: none;
  text-align: center;
  background-image: linear-gradient(-90deg, #FF0018 0%, #FFA52C 20%, #FFFF41 40%, #008018 60%, #0000F9 80%, #86007D 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: colorize 2s linear infinite, move 2s linear infinite;
}

.win {
  --is-win-1: calc(1 - var(--1-inverted));
  --is-win-2: calc(var(--is-win-1) * calc(1 - var(--2-inverted)));
  --is-win-3: calc(var(--is-win-2) * calc(1 - var(--3-inverted)));
  --is-win-4: calc(var(--is-win-3) * calc(1 - var(--4-inverted)));
  --is-win-5: calc(var(--is-win-4) * calc(1 - var(--5-inverted)));
  --is-win-6: calc(var(--is-win-5) * calc(1 - var(--6-inverted)));
  --is-win-7: calc(var(--is-win-6) * calc(1 - var(--7-inverted)));
  --is-win-8: calc(var(--is-win-7) * calc(1 - var(--8-inverted)));
  --is-win-9: calc(var(--is-win-8) * calc(1 - var(--9-inverted)));
  opacity: var(--is-win-9);
}